<template>
  <div>
    <!-- 轮播 -->
    <TopSwiper :tops="tops"></TopSwiper>

    <!-- 图书列表 -->
    <Cart v-for="book in books" :key="book.id" :book="book"></Cart>

    <p class="text-footer" v-if="!more">
      没有更多数据
    </p>
  </div>
</template>
<style>

</style>
<script>
  import {get} from '@/util'
  import Cart from '@/components/Card'
  import TopSwiper from '@/components/TopSwiper'
  export default {
    components: {
      Cart,
      TopSwiper
    },
    data () {
      return {
        books: [],
        // 当前页
        page: 0,
        // 是否显示更多数据
        more: true,
        // 轮播图
        tops: []
      }
    },
    mounted () {
      this.getList(true)
      this.getTop()
    },
    methods: {
      /**
       * 获取图书列表
       * @param init 是否加载第一页数据
       */
      async getList (init) {
        // 请求第一页数据
        if (init) {
          this.page = 0
          this.more = true
        }

        // 在当前页面显示导航条加载动画
        wx.showNavigationBarLoading()
        const books = await get('/weapp/booklist', {
          page: this.page
        })

        // 如果最新请求的list的长度小于10，就代表没有下一页了
        if (books.list.length < 10 && this.page > 0) {
          this.more = false
        }
        if (init) {
          this.books = books.list
          wx.stopPullDownRefresh()
        } else {
          // 下拉刷新，不能直接覆盖books而是累加
          this.books = this.books.concat(books.list)
        }

        // 接口请求到，停止下拉
        wx.stopPullDownRefresh()
        // 隐藏导航条加载动画
        wx.hideNavigationBarLoading()
      },
      /**
       * 获取排名前12本书
       */
      async getTop () {
        const tops = await get('/weapp/top')
        this.tops = tops.list
      }
    },
    /**
     * 下拉刷新触发的方法
     */
    onPullDownRefresh () {
      this.getList(true)
      this.getTop()
    },
    /**
     * 拉到底部，加载下一页数据
     * @returns {boolean}
     */
    onReachBottom () {
      if (!this.more) {
        // 没有更多了
        return false
      }
      this.page = this.page + 1
      this.getList()
    }
  }
</script>
